﻿<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        td {
            vertical-align: middle;
        }

        p {
            display: inline;
        }
    </style>
    <meta charset="utf-8" />
    <title>修改商品信息</title>
    <!-- bootstrap css 左侧下拉有更多-->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- site css -->
    <link rel="stylesheet" href="../style.css" />
    <!-- responsive css 使边上的缩放-->
    <link rel="stylesheet" href="../css/responsive.css" />
    <script src="../js/ajax.js"></script>
    <script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
    <script>
        function uploadFileAndParam() {
            var url = "http://localhost:50364/api/Admin/Goods/ChangeGoods";
            $.ajax({
                //几个参数需要注意一下
                type: "get",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: url,

                data: $('#myForm').serializeArray(),
                success: function (result) {
                    alert("修改SKU成功");
                },
                error: function () {
                    alert("异常！");
                }
            });

        }

        $(document).ready(function () {

            //获取pro_id
            //将地址从"？"位置分割成两部分
            var turl = decodeURI(window.location.href);
            var arr = turl.split('?');
            //alert(turl);
            //取地址右边参数部分从"&"位置继续分割，成为单独参数列表（不过只有id一个参数）
            var params = arr[1].split('&'); //得到[a=1,b=2,c=3]
            //定义一个空对象
            var obj = {};
            for (var i = 0; i < params.length; i++) {
                var param = params[i].split('='); //得到[id,id值]
                obj[param[0]] = param[1]; //为对象赋值
            }



            var pro_id = obj["pro_id"];
            $('#pro_id').val(pro_id);
            var a = $('#pro_id').val();
            //alert(a);
            //显示商品详情
            var url = "http://localhost:50364/api/Admin/Goods/GoodInfo";
            //alert(typeof(pro_id));
            $.ajax({
                type: 'get',
                url: url,
                data: { "pro_id": a },
                success: function (data) {
                    //alert(data["pro_type"]);
                    $('#pro_name').val(data["pro_name"]);
                    $('#pro_type').val(data["pro_type"]);
                    $('#pro_unit').val(data["pro_unit"]);
                    $('#pro_type').val(data["pro_type"]);
                    $('#pro_rank').val(data["pro_rank"]);
                    $('#pro_ratio').val(data["pro_ratio"]);
                    $('#pro_label1').val(data["pro_label1"]);
                    $('#pro_label2').val(data["pro_label2"]);
                    $('#pro_describe').val(data["pro_describe"]);
                    $('#pro_dprice').val(data["pro_dprice"]);
                    $('#pro_state').val(data["pro_state"]);
                    $('#pro_activity').val(data["pro_activity"]);



                }


            });
        })

        function show_image(obj) {
            //首先获取到文件输入框和img元素
            show_img = $("#show_img")[0];
            //创建URL对象
            show_img.src = window.URL.createObjectURL(obj.files[0]);
            //显示图片
            show_img.style.display = 'block';
        }



        var images = [];//定义一个空的数组用来储存img路径
        function show_scroll(obj) {
            var fl = obj.files.length;
            for (var i = 0; i < fl; i++) {
                var file = obj.files[i];
                //FileReader用来把文件读入内存，并且读取文件中的数据。
                // FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。
                var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
                    //不太明白e.target.result代表什么（一大串数字）好像是图片转化为base64
                    var imgstr = '<img  style="width:77px;height:77px;" src="' + e.target.result + '"/>';
                    $("#show_scroll").append(
                        "<div class=\"img\">" +
                        "<div class=\"img-bg\">" +
                        "" + imgstr + "" +
                        "</div>" +
                        "<div class=\"img-center\">" +
                        "</div>" +
                        "</div>"
                    )
                };
                //读取文件内容，结果用data:url的字符串形式表示
                reader.readAsDataURL(file);
            }
        }


    </script>
</head>
<body>
    <div class="full_container">
        <div class="inner_container">
            <!-- Sidebar 侧边栏 -->
            <nav id="sidebar">
                <div class="sidebar_blog_2">
                    <h4>商城管理后台</h4>
                    <ul class="list-unstyled components">
                        <li class="active">
                            <a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-dashboard yellow_color"></i> <span>商品管理</span></a>
                            <ul class="collapse list-unstyled" id="dashboard">
                                <li>
                                    <a href="">> <span>商品管理</span></a>
                                </li>
                                <li>
                                    <a href="">> <span>产品统计</span></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#element" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-object-group blue2_color"></i> <span>交易管理</span></a>
                            <ul class="collapse list-unstyled" id="element">
                                <li><a href="order_list.html"> <span>订单列表</span></a></li>
                                <li><a href=""> <span>发货管理</span></a></li>

                            </ul>
                        </li>
                        <li><a href="widgets.html"><i class="fa fa-map purple_color2"></i> <span>优惠券管理</span></a></li>
                        <li><a href="widgets.html"><i class="fa fa-diamond orange_color"></i> <span>用户管理</span></a></li>
                        <!--<li>
                            <a href=""><i class="fa fa-clone yellow_color"></i> <span>退出（需不需要?)</span></a>
                        </li>-->
                    </ul>
                </div>
            </nav>
            <!-- end sidebar -->
            <!-- right content -->
            <div id="content">
                <!-- topbar 上边框 -->
                <div class="topbar">
                    <nav class="navbar navbar-expand-lg navbar-light">
                        <div class="full">
                            <button type="button" id="sidebarCollapse" class="sidebar_toggle"><i class="fa fa-bars"></i></button>

                            <div class="right_topbar">
                                <div class="icon_info">
                                    <ul>
                                        <li><a href="#"><i class="fa fa-bell-o"></i><span class="badge"></span></a></li>
                                        <li><a href="#"><i class="fa fa-sign-out"></i><span class="badge"></span></a></li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
                <!-- end topbar -->
                <!-- dashboard inner -->
                <div class="midde_cont">
                    <div class="container-fluid">
                        <div class="row column_title">
                            <div class="col-md-12">
                                <div class="page_title">
                                    <h2>商品管理</h2>
                                </div>
                            </div>
                        </div>
                        <!-- row 中间填一些表格或者商品行-->
                        <div class="row column4 graph">
                            <div style="-webkit-box-flex: 0; flex: 0; max-width: 100%; margin-left: auto; margin-right: auto;">
                                <div class="dash_blog" style="width: 800px;">
                                    <!--<div class="dash_blog_inner">-->
                                    <div>
                                        <div class="dash_head">
                                            <h3><span><i class="fa fa-calendar" style="margin-right: 20px;"></i>修改商品信息</span></h3>
                                        </div>
                                        <!--<div class="list_cont">
                                            <p style="font-size: 20px; line-height: 28px;">SKU_ID ：54365</p>
                                        </div>-->
                                        <div class="task_list_main">
                                            <form id="myForm" style="margin: 0 auto;">
                                                <ul class="task_list">
                                                    <!--pro_id-->
                                                    <li>
                                                        <p style="margin-left: 20px;margin-right: 20px;"> Pro_ID ：</p>
                                                        <input type="text" name="pro_id" id="pro_id"style="width: 423px;"  />  <!--页面跳转传来的SKU_ID-->
                                                    </li>
                                                    <!--产品名称-->
                                                    <li>
                                                        <p style="margin-left: 14px;margin-right: 14px;">产品名称 ：</p>
                                                        <input type="text" name="pro_name" id="pro_name"style="width: 423px;"  />  <!--页面跳转传来的SKU_ID-->
</li>
                                                    <!--种类-->
                                                    <li>
                                                        <p style="margin-left: 28px;margin-right: 28px;">种类 ：</p>
                                                        <input type="text" name="pro_type" id="pro_type"style="width: 423px;"  />
                                                    </li>
                                                    <!--单位-->
                                                    <li>
                                                        <p style="margin-left: 28px;margin-right: 28px;">单位 ：</p>
                                                        <input type="text" name="pro_unit" id="pro_unit"style="width: 423px;"  />
                                                    </li>
                                                    <!--标签1-->
                                                    <li>
                                                        <p style="margin-left: 26px;margin-right: 26px;">标签1 ：</p>
                                                        <input type="text" name="pro_label1" id="pro_label1"style="width: 423px;"  />
                                                    </li>
                                                    <!--标签2-->
                                                    <li>
                                                        <p style="margin-left: 26px;margin-right: 26px;">标签2 ：</p>
                                                        <input type="text" name="pro_label2" id="pro_label2"style="width: 423px;"  />
                                                    </li>
                                                    <!--等级-->
                                                    <li>
                                                        <p style="margin-left: 28px;margin-right: 28px;">等级 ：</p>
                                                        <input type="text" name="pro_rank" id="pro_rank" style="width: 423px;" />
                                                    </li>
                                                    <!--状态-->
                                                    <li>
                                                        <p style="margin-left: 28px;margin-right: 28px;">状态 ：</p>
                                                        <input type="text" name="pro_state" id="pro_state"style="width: 423px;"  />
                                                    </li>
                                                    <!--商品活动标签-->
                                                    <li>
                                                        <p>商品活动标签 ：</p>
                                                        <input type="text" name="pro_activity" id="pro_activity" style="width: 423px;" />
                                                    </li>
                                                    <!--佣金比-->
                                                    <li>
                                                        <p style="margin-left: 21px;margin-right: 21px;">佣金比 ：</p> 
                                                        <input type="text" name="pro_ratio" id="pro_ratio" style="width: 423px;" />
                                                    </li>
                                                    <!--默认价格-->
                                                    <li>
                                                        <p style="margin-left:14px;margin-right:14px;">默认价格 ：</p >
                                                        <input type="text" name="pro_dprice" id="pro_dprice"style="width: 423px;" />
                                                    </li>

                                                    <!--描述-->
                                                    <li>
                                                        <p style="margin-left: 28px;margin-right: 28px;">描述 ：</p>
                                                        <textarea style="resize:none;vertical-align:middle" rows="3" cols="50" name="pro_describe" id="pro_describe"></textarea>
                                                    </li>
                                                    <!--图片-->
                                                    <li>
                                                        <!--绑定选择图片的方法-->
                                                        <div style="margin-bottom: 20px;">图片 ：<input type="file" name="pro_pic" id="pro_pic" onchange="show_image(this)" style=" font-size:14px;" /></div>
                                                        <!--上传图片展示-->
                                                        <img style="border:2px solid gray;width:700px;height:250px" id="show_img"></img>
                                                    </li>
                                                    <!--滑动图-->
                                                    <li>

                                                        <div style="margin-bottom: 20px;">滑动图 ：<input type="file" name="pro_scroll" id="pro_scroll" multiple="multiple" onchange="show_scroll(this)" style=" font-size:14px;"  /></div>
                                                        <!--上传图片展示-->
                                                        <div style="border:2px solid gray;width:700px;height:250px" class="three" id="show_scroll"></div>
                                                    </li>

                                                </ul>
                                            </form>
                                        </div>
                                        <div class="read_more">
                                            <!--<input type="button" value="button提交" onclick="uploadFileAndParam()" />-->
                                            <div class="center" value="button提交" onclick="uploadFileAndParam()"><a class="main_bt read_bt" href="#" style="background-color :#fd7e14;">提交修改</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end row-->
                        </div>
                        <!-- footer -->
                        <!--<div class="container-fluid">
                           <div class="footer">
                              <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                           </div>
                        </div>-->
                    </div>
                    <!-- end dashboard inner -->
                </div>
            </div>
        </div>
        <!-- jQuery -->
        <!--下拉小三角有更多-->
        <!--<script src="../js/jquery.min.js"></script>-->
        <!--<script src="js/popper.min.js"></script>-->
        <!--下拉小三角有更多-->
        <script src="../js/bootstrap.min.js"></script>
        <!-- wow animation 缩放之后左端更好看-->
        <script src="../js/animate.js"></script>
        <!-- select country -->
        <!--<script src="js/bootstrap-select.js"></script>-->
        <!-- owl carousel -->
        <!--<script src="js/owl.carousel.js"></script>-->
        <!-- chart js -->
        <!--<script src="js/Chart.min.js"></script>
        <script src="js/Chart.bundle.min.js"></script>
        <script src="js/utils.js"></script>
        <script src="js/analyser.js"></script>-->
        <!-- nice scrollbar -->
        <!--<script src="js/perfect-scrollbar.min.js"></script>-->
        <!--<script>
            var ps = new PerfectScrollbar('#sidebar');
        </script>-->
        <!-- fancy box js -->
        <!--<script src="js/jquery-3.3.1.min.js"></script>-->
        <!--<script src="js/jquery.fancybox.min.js"></script>-->
        <!-- custom js 左侧缩小 -->
        <script src="../js/custom.js"></script>

        <!-- calendar file css -->
        <!--<script src="js/semantic.min.js"></script>-->
</body>
</html>
